<template>
	<view class="dataMsg">
		<u-navbar title="订单列表" :border-bottom="false"></u-navbar>
		<!-- <view class="header">
			<img src="../../static/wj.png" alt="" class="img" />
			数据筛选汇总（扣除无效订单）：￥{{ total_money }}
		</view> -->
		<view class="time">
			<view class="t">
				<view
					class="t_i"
					@click="
						rotation1++;
						show = !show;
						show3 = false;
					"
				>
					日期
					<img src="../../static/xia.png" :style="'transform:rotate(' + rotation1 * 180 + 'deg)'" alt="" class="icon" />
				</view>
				<!-- <view
					class="t_i"
					@click="
						rotation2++;
						show3 = !show3;
						show = false;
					"
				>
					已供货服务站
					<img src="../../static/xia.png" :style="'transform:rotate(' + rotation2 * 180 + 'deg)'" alt="" class="icon" />
				</view> -->
			</view>
			<view class="b" :style="{ display: show ? 'block' : 'none' }">
				<view class="title">时间范围</view>
				<view class="time1">
					<view @click="CliActive(1)" :class="active === 1 ? 'Aitem item' : 'item'">全部日期</view>
					<view @click="CliActive(2)" :class="active === 2 ? 'Aitem item' : 'item'">今日</view>
					<view @click="CliActive(3)" :class="active === 3 ? 'Aitem item' : 'item'">昨日</view>
					<view @click="CliActive(4)" :class="active === 4 ? 'Aitem item' : 'item'">近七日</view>
				</view>
				<view class="title title2">自定义日期筛选（最大31天）</view>
				<view class="Range" @click="show2 = true">
					<view class="Range_t">{{ startDate }}</view>
					<view class="xian">—</view>
					<view class="Range_t">{{ endDate }}</view>
				</view>
				<view class="bt" @click="screen">确认</view>
			</view>
			<view class="b2" :style="{ display: show3 ? 'block' : 'none' }">
				<view class="kl">
					<view class="ck">
						<u-checkbox v-model="checked" @change="checkboxChangeMAX" label-size="30">全选</u-checkbox>
						<u-checkbox-group @change="checkboxGroupChange" :wrap="true">
							<u-checkbox @change="checkboxChange" label-size="30" v-model="item.checked" v-for="(item, index) in list3" :key="index" :name="item.name">
								{{ item.name }}
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
			</view>
		</view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="search_box">
			<u-search v-model="keyword" placeholder="请输入订单号/手机号" @custom="search" @search="search"></u-search>
		</view>
		<scroll-view class="msg" scroll-y="true" @scrolltolower="lower1" v-if="current !== 4">
			<view v-for="(item, index) in flowList" :key="index" class="item">
				<view class="tips1">
					<view class="tips11">
						购买人姓名：
						<view class="Rig">{{ item.uid_name }}</view>
					</view>
					<view class="c">
						{{
							item.status === 0
								? '未支付'
								: item.status === 1
								? '已支付'
								: item.status === 2
								? '已完成'
								: item.status === 3
								? '过期'
								: item.status === 4
								? '异常'
								: item.status === 5 && item.tk_status === 0
								? '退款中'
								: item.status === 5 && item.tk_status === 1
								? '已退款'
								: item.status === 5 && item.tk_status === 2
								? '拒绝退款'
								: ''
						}}
					</view>
				</view>
				<view class="tips2">
					购买人电话：
					<view class="Rig">{{ item.uid_tel }}</view>
					<img src="../../static/dianhua3.png" alt="" @click="dianhua(item.uid_tel)" style="width: 30rpx; height: 30rpx; margin-left: 15rpx" />
				</view>
				<view class="msg_info">
					<shopInfo :item="item"></shopInfo>
				</view>
				<view class="t">
					<view class="t1">
						订单金额：
						<view class="c">￥{{ item.xj_sprice }}</view>
					</view>
					<view class="t2">下单时间：{{ item.create_time }}</view>
					<view class="t3">
						订单编号：{{ item.order_num }}
						<view class="t3b" @click="copy(item.order_num)">复制</view>
					</view>
				</view>
				<view class="bee">
					<view
						class="b_box b1"
						v-if="item.status === 5 && item.tk_status === 0"
						@click="
							showT = true;
							tInfo.order_id = item.id;
						"
					>
						退款
					</view>
					<!-- <view class="b_box b2">到店核销</view> -->
					<view class="b_box b2" v-if="item.status === 1" @click="hx(item)">核销</view>
					<!-- <view class="b_box b3">申请售后</view> -->
					<!-- <view class="b_box b4">退款详情</view> -->
					<!-- <view class="b_box b5">售后详情</view> -->
				</view>
			</view>
			<view style="padding: 20rpx 0rpx; box-sizing: border-box">
				<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" :bg-color="'none'"></u-loadmore>
			</view>
		</scroll-view>
		<view v-else class="msg2">
			<view class="msg_hedar">
				<view class="l">商品信息</view>
				<view class="r">
					<view class="itm">商品价格</view>
					<view class="itm">已售数量</view>
				</view>
			</view>
			<scroll-view class="info" scroll-y="true" @scrolltolower="lower2">
				<view class="info_i" v-for="(item, index) in flowList" :key="index">
					<view class="l">
						<img class="img" :src="item.map_image" alt="" />
						<view class="name">{{ item.goods_title }}</view>
					</view>
					<view class="r">
						<view class="itm1">￥{{ item.xj_sprice }}</view>
						<view class="itm2">{{ item.t_nums }}</view>
					</view>
				</view>
				<view style="padding: 20rpx 0rpx; box-sizing: border-box">
					<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" :bg-color="'none'"></u-loadmore>
				</view>
			</scroll-view>
		</view>
		<u-calendar v-model="show2" :mode="'range'" @change="change2" :safe-area-inset-bottom="true"></u-calendar>
		<u-top-tips ref="uTips" type="error" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
		<u-modal v-model="showT" :show-cancel-button="true" :title="'退款申请'" :confirm-text="'确认退款'" :cancel-text="'拒绝退款'" @confirm="confirmT(1)" @cancel="confirmT(2)">
			<view class="slot-content">
				<view style="padding: 30rpx">
					<input type="text" v-model="tInfo.tk_check_notes" placeholder="请输入备注" />
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import shopInfo from '@/components/shopInfo.vue';
import { fwzOrderList, tkOrder, goodsordercount } from '../../libs/axios.js';
export default {
	components: {
		shopInfo
	},
	data() {
		return {
			showT: false,
			show: false,
			show2: false,
			show3: false,
			active: 1,
			// total_money: '',
			tInfo: {
				order_id: '',
				tk_check_notes: ''
			},
			startDate: '选择开始日期',
			endDate: '选择结束日期',
			rotation1: 0,
			rotation2: 0,
			keyword: '',
			checked: false,
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			// 导航栏内容区域高度，不包括状态栏高度在内
			navbarHeight: 44,
			list: [
				{
					name: '全部'
				},
				{
					name: '待核销'
				},
				{
					name: '已完成'
				},
				{
					name: '售后'
				},
				{
					name: '商品统计'
				}
			],
			current: 0,
			flowList: [],
			list3: [],
			loadStatus: 'loadmore',
			page_num: 1,
			time1: 0,
			time2: 0
		};
	},
	onLoad() {
		this.$refs.uTips.show({
			title: '提示：商品统计为独立数据，筛选全部时默认筛选订单待核销、已完成、售后订单。3秒后消失',
			type: 'error',
			duration: 3000
		});
		this.lower1();
	},
	methods: {
		search() {
			this.loadStatus = 'loadmore';
			this.page_num = 1;
			this.flowList = [];
			this.lower1();
		},
		hx(item) {
			uni.navigateTo({
				url: '/pages/verification/verification?item=' + JSON.stringify(item)
			});
		},
		dianhua(tel) {
			uni.makePhoneCall({
				phoneNumber: tel + '',
				success: () => {},
				fail: () => {}
			});
		},
		async confirmT(index) {
			const _this = this;
			uni.login({
				async success(res) {
					let option = {
						wx_code: res.code,
						order_id: _this.tInfo.order_id,
						tk_status: index,
						tk_check_notes: _this.tInfo.tk_check_notes
					};
					let info = await tkOrder(option);
					_this.tInfo.tk_check_notes = '';
					_this.tInfo.order_id = '';
					uni.showToast({
						title: info.message,
						duration: 2000
					});
					setTimeout(() => {
						_this.loadStatus = 'loadmore';
						_this.page_num = 1;
						_this.flowList = [];
						_this.lower1();
					}, 2000);
				}
			});
		},

		copy(text) {
			uni.setClipboardData({
				data: text,
				success: function () {
					console.log('success');
				}
			});
		},
		async lower1() {
			if (this.loadStatus === 'nomore') {
				return false;
			} else {
				this.loadStatus = 'loading';
			}
			if (this.current === 4) {
				let info = await goodsordercount({
					pageIndex: this.page_num,
					pageSize: 10,
					s_time: this.time1,
					e_time: this.time2
				});
				info.data.forEach((item) => {
					item.create_time = this.$moment(item.create_time * 1000).format('YYYY-MM-DD HH:mm:ss');
					this.flowList.push(item);
				});
				this.loadStatus = 'nomore';
				// if (info.data.list.length === 10) {
				// 	this.page_num += 1;
				// 	this.loadStatus = 'loadmore';
				// } else {
				// 	this.loadStatus = 'nomore';
				// }
			} else {
				let option = {
					pageIndex: this.page_num,
					pageSize: 10,
					status: this.current === 0 ? '' : this.current === 1 ? '1' : this.current === 2 ? '2' : this.current === 3 ? '5' : '',
					is_hx: this.current === 1 ? 1 : '',
					// tg_order: this.current === 4 ? 1 : '',
					s_time: this.time1,
					e_time: this.time2,
					tk: this.current === 4 ? 1 : ''
				};
				if (this.keyword.length > 12) {
					option.order_num = this.keyword;
				} else {
					option.uid_tel = this.keyword;
				}
				let info = await fwzOrderList(option);
				this.keyword;
				info.data.list.forEach((item) => {
					// item.map_image = this.$store.state.imgUrl + item.map_image;
					item.create_time = this.$moment(item.create_time * 1000).format('YYYY-MM-DD HH:mm:ss');
					this.flowList.push(item);
				});
				// this.total_money = Number(info.data.total_money);
				if (info.data.list.length === 10) {
					this.page_num += 1;
					this.loadStatus = 'loadmore';
				} else {
					this.loadStatus = 'nomore';
				}
			}
		},
		lower2() {
			this.loadStatus = 'loading';
			if (true) {
				console.log(2);
			} else {
				this.loadStatus = 'nomore';
			}
		},
		change(index) {
			this.current = index;
			this.loadStatus = 'loadmore';
			this.page_num = 1;
			this.flowList = [];
			this.lower1();
		},
		screen() {
			if (this.active === 1) {
				if (this.startDate != '选择开始日期') {
					let a1 = this.startDate + ' 00:00:00';
					let a2 = this.endDate + ' 23:59:59';
					this.time1 = this.$moment(a1).format('x') / 1000;
					this.time2 = this.$moment(a2).format('x') / 1000;
				} else {
					this.time1 = 0;
					this.time2 = 0;
				}
			} else if (this.active === 2) {
				this.time1 = this.$moment().startOf('day').valueOf() / 1000;
				this.time2 = this.$moment().subtract(-1, 'days').startOf('day').valueOf() / 1000 - 1;
			} else if (this.active === 3) {
				this.time1 = this.$moment().subtract(1, 'days').startOf('day').valueOf() / 1000;
				this.time2 = this.$moment().startOf('day').valueOf() / 1000 - 1;
			} else if (this.active === 4) {
				this.time1 = this.$moment().subtract(7, 'days').startOf('day').valueOf() / 1000;
				this.time2 = this.$moment().startOf('day').valueOf() / 1000 - 1;
			}
			this.loadStatus = 'loadmore';
			this.page_num = 1;
			this.flowList = [];
			this.show = false;
			this.lower1();
		},
		CliActive(index) {
			this.startDate = '选择开始日期';
			this.endDate = '选择结束日期';
			this.active = index;
		},
		change2(e) {
			this.active = 1;
			this.startDate = e.startDate;
			this.endDate = e.endDate;
		},
		checkedAll() {
			this.list3.map((val) => {
				val.checked = true;
			});
		},
		checkboxChange(e) {
			console.log(e);
		},
		checkboxChangeMAX(e) {
			e.value
				? this.list3.map((val) => {
						val.checked = true;
				  })
				: this.list3.map((val) => {
						val.checked = false;
				  });
		},
		checkboxGroupChange(e) {
			e.length === this.list3.length ? (this.checked = true) : (this.checked = false);
		}
	}
};
</script>

<style lang="scss">
.dataMsg {
	height: 100vh;
	background: rgba(245, 245, 245, 1);
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.search_box {
		padding: 20rpx 28rpx;
		background: #fff;
	}
	.header {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background: #fff;
		.img {
			width: 23.8rpx;
			height: 28.5rpx;
			margin-right: 20rpx;
		}
	}
	.msg {
		height: 65vh;
		overflow-y: scroll;
		// padding: 0 30rpx 30rpx 30rpx;
		margin-top: 30rpx;
		.item {
			width: 702rpx;
			border-radius: 10rpx;
			background: rgba(255, 255, 255, 1);
			margin: 0 auto 60rpx auto;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			.tips1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.tips11 {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					.Rig {
						margin-left: 20rpx;
					}
					// img {
					// 	width: 30rpx;
					// 	height: 30rpx;
					// 	margin-left: 10rpx;
					// }
				}
				.c {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(255, 67, 73, 1);
				}
			}

			.tips2 {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				padding: 20rpx 0 20rpx 0;
				box-sizing: border-box;
				.Rig {
					margin-left: 20rpx;
				}
				// img {
				// 	width: 30rpx;
				// 	height: 30rpx;
				// 	margin-left: 10rpx;
				// }
			}
			.t {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				box-sizing: border-box;
				.t1 {
					display: flex;
					padding-top: 30rpx;
					border-top: 2rpx solid #eeeeee;
					.c {
						color: rgba(246, 83, 50, 1);
					}
				}
				.t2 {
					color: rgba(153, 153, 153, 1);
					margin-top: 20rpx;
				}
				.t3 {
					color: rgba(153, 153, 153, 1);
					margin-top: 20rpx;
					display: flex;
					.t3b {
						font-size: 20rpx;
						width: 58rpx;
						height: 30rpx;
						border-radius: 4rpx;
						border: 1rpx solid rgb(153, 153, 153);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 20rpx;
					}
				}
			}
			.bee {
				display: flex;
				justify-content: flex-end;
				margin: 30rpx 0;
				.b_box {
					padding: 10rpx 20rpx;
					border-radius: 6rpx;
					background: rgb(255, 255, 255);
					border: 1rpx solid rgb(153, 153, 153);
					font-size: 25rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					margin-left: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.b2 {
					background: rgb(255, 67, 73);
					border: 1rpx solid rgb(255, 67, 73);
					color: #ffffff;
				}
			}
		}
	}
	.msg2 {
		padding: 30rpx;
		background: #fff;
		.msg_hedar {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			background: #fff;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #eee;
			.l {
				width: 50%;
			}
			.r {
				width: 50%;
				display: flex;
				.itm {
					width: 50%;
					text-align: center;
				}
			}
		}
		.info {
			height: 64vh;
			overflow: scroll;
			.info_i {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 30rpx 0;
				.l {
					width: 50%;
					display: flex;
					align-items: center;
					.img {
						width: 40rpx;
						height: 40rpx;
					}
					.name {
						margin-left: 20rpx;
						width: 90%;
						white-space: nowrap; // 强制一行显示
						overflow: hidden; // 超出隐藏
						text-overflow: ellipsis; // 省略号
						font-size: 30rpx;
					}
				}
				.r {
					width: 50%;
					display: flex;
					.itm1 {
						width: 50%;
						text-align: center;
						font-size: 30rpx;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
					}
					.itm2 {
						width: 50%;
						text-align: center;
						font-size: 30rpx;
						font-weight: 400;
						color: rgba(37, 192, 90, 1);
					}
				}
			}
		}
	}
	.time {
		position: relative;
		background: #fff;
		.t {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			.t_i {
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.icon {
				width: 20rpx;
				height: 12rpx;
				margin-left: 10rpx;
				transition-duration: 5;
			}
		}
		.b {
			position: absolute;
			left: 0;
			right: 0;
			background: #fff;
			z-index: 999;
			// background: red;
			.title {
				padding: 0 30rpx;
			}
			.time1 {
				padding: 30rpx 0;
				margin: 0 30rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #eee;
				.item {
					width: 20%;
					height: 60rpx;
					border-radius: 10rpx;
					background: rgba(245, 246, 247, 1);
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.Aitem {
					background: rgba(253, 244, 241, 1);
					color: rgba(251, 99, 79, 1);
				}
			}
			.title2 {
				padding: 30rpx;
			}
			.Range {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 30rpx;
				.Range_t {
					width: 300rpx;
					height: 62rpx;
					border-radius: 10rpx;
					background: rgba(245, 246, 247, 1);
					border: 2rpx solid rgba(223, 223, 223, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					font-weight: 400;
					color: #222;
				}
				.xian {
					margin: 0 20rpx;
				}
			}
			.bt {
				margin-bottom: 40rpx;
			}
		}
		.b2 {
			position: absolute;
			left: 0;
			right: 0;
			background: #fff;
			z-index: 999;
		}
	}
	.kl {
		padding: 30rpx;
		height: 70vh;
		overflow: scroll;
		box-sizing: border-box;

		.kl_title {
			text-align: center;
			padding: 0 0 30rpx 0;
			font-size: 36rpx;
			font-weight: 400;
		}
		.ck {
		}
	}
	.bt {
		width: 604rpx;
		height: 84rpx;
		border-radius: 196rpx;
		border: 2rpx solid rgb(255, 67, 73);
		background: rgb(255, 67, 73);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin: 40rpx auto 0 auto;
	}
}
</style>
